<template>
    <div class="box">
        <div class="box1">
             <div class="titel">
                <span>{{pointsName1 }}</span>
                <span class="titel1">{{ pointsNumber1 }}元={{ exchanges1 }}分</span>
             </div>
             <div class="points">
                <div class="boxes">
                    <div class="boxes1">
                      <el-slider v-model="pointsNumber1" />
                        <span>{{ pointsNumber1 }}/元</span>
                    </div>
                    <div class="boxes2">
                       <el-slider v-model="exchanges1" />
                        <span>{{ exchanges1 }}/分</span>
                    </div>
                </div>
                <div class="boxes1">
                      <el-button :disabled="shopping" @click="clicks1">提交</el-button>
                </div>
             </div>
        </div>
        <div class="box1">
             <div class="titel">
                <span>{{pointsName2 }}</span>
                <span class="titel1">{{pointsNumber2 }}元={{exchanges2 }}分</span>
             </div>
             <div class="points">
                <div class="boxes">
                    <div class="boxes1">
                      <el-slider v-model="pointsNumber2" />
                        <span>{{pointsNumber2 }}/元</span>
                    </div>
                    <div class="boxes2">
                       <el-slider v-model="exchanges2" max="1000" />
                        <span>{{exchanges2 }}/分</span>
                    </div>
                </div>
                <div class="boxes1">
                    <el-button :disabled="evalua" @click="clicks2">提交</el-button>
                </div>
             </div>
        </div>
        <div class="box1" >
             <div class="titel">
                <span>{{ pointsName3 }}</span>
                <span class="titel1">{{ pointsNumber3}}元={{ exchanges3 }}分</span>
             </div>
             <div class="points">
                <div class="boxes">
                    <div class="boxes1">
                      <el-slider v-model="pointsNumber3" />
                        <span>{{ pointsNumber3 }}/元</span>
                    </div>
                    <div class="boxes2">
                       <el-slider v-model="exchanges3" />
                        <span>{{ exchanges3 }}/分</span>
                    </div>
                </div>
                <div class="boxes1">
                      <el-button :disabled="integr" @click="clicks3">提交</el-button>
                </div>
             </div>
        </div>
    </div>
</template>

<script setup>
 import { reactive,ref,getCurrentInstance, onMounted ,watch} from 'vue';
   import axioes from 'axios';
   import { ElMessage, ElMessageBox } from 'element-plus'
   //弹模态框
 
   var axios=getCurrentInstance();
   var url="http://192.168.199.11:8001/ShoppingStreet";
   let shopping=ref(true);
  let token=localStorage.getItem("token");
  let pointsManage=ref([]);
  let evalua=ref(true);
  let integr=ref(true);
  let pointsName1=ref();
  let pointsNumber1=ref();
  let pointsName2=ref();
  let pointsNumber2=ref();
  let pointsName3=ref();
  let pointsNumber3=ref();
  let exchanges1=ref();
  let exchanges2=ref();
  let exchanges3=ref();
  let ruleId1=ref();
  let ruleId2=ref();
  let ruleId3=ref();
  function pointslist(){
            axioes.defaults.headers.common['token'] = token;
     axios.proxy.$http.post(url+"/exRule/exRuleList",{}).then(function(res){
           pointsManage.value=res.data.data;
           pointsManage.value.forEach(element => {
               if(element.ruleId==1){
                pointsName1.value=element.pointsName;
                pointsNumber1.value=element.pointsNumber;
                 exchanges1.value=element.exchanges;
                  ruleId1.value=element.ruleId
               }else if(element.ruleId==2){
                pointsName2.value=element.pointsName;
                pointsNumber2.value=element.pointsNumber;
                exchanges2.value=element.exchanges;
                ruleId2.value=element.ruleId
               }else if(element.ruleId==3){
                pointsName3.value=element.pointsName;
                pointsNumber3.value=element.pointsNumber;
                exchanges3.value=element.exchanges;
                ruleId3.value=element.ruleId
               }
           });
     })
 }
 
    // 监听滑块值的变化
    watch(pointsNumber1, (newValue) => {
    if (newValue !== 0) {
            shopping.value = false;
        } else {
            shopping.value = true;
        }
    });
    watch(pointsNumber2, (newValue) => {
    if (newValue !== 0) {
            evalua.value = false;
        } else {
            evalua.value = true;
        }
    });
    watch(pointsNumber3, (newValue) => {
    if (newValue !== 0) {
            integr.value = false;
        } else {
            integr.value = true;
        }
    });
    watch(exchanges1, (newValue) => {
    if (newValue !== 0) {
            shopping.value = false;
        } else {
            shopping.value = true;
        }
    });
    watch(exchanges2, (newValue) => {
    if (newValue !== 0) {
            evalua.value = false;
        } else {
            evalua.value = true;
        }
    });
    watch(exchanges3, (newValue) => {
    if (newValue !== 0) {
            integr.value = false;
        } else {
            integr.value = true;
        }
    });
    function clicks1(){
        axioes.defaults.headers.common['token'] = token;
        var data={
            pointsNumber:pointsNumber1.value,
            exchanges:exchanges1.value,
            ruleId:ruleId1.value
        }
     axios.proxy.$http.post(url+"/exRule/updateExRule",data).then(function(res){
        ElMessage({
            message: '提交成功',
            type: 'success',
        })
           pointslist();
     })
    }
    function clicks2(){
        axioes.defaults.headers.common['token'] = token;
        var data={
            pointsNumber:pointsNumber2.value,
            exchanges:exchanges2.value,
            ruleId:ruleId2.value
        }
     axios.proxy.$http.post(url+"/exRule/updateExRule",data).then(function(res){
        console.log(res);
           pointslist();
           ElMessage({
            message: '提交成功',
            type: 'success',
        })
     })
    }
    function clicks3(){
        axioes.defaults.headers.common['token'] = token;
        var data={
            pointsNumber:pointsNumber3.value,
            exchanges:exchanges3.value,
            ruleId:ruleId3.value
        }
     axios.proxy.$http.post(url+"/exRule/updateExRule",data).then(function(res){
           console.log(res);
           pointslist();
           ElMessage({
            message: '提交成功',
            type: 'success',
        })
     })
    }
 onMounted(function(){
    pointslist();
 })
</script>

<style lang="less" scoped>
 *{
    margin: 0;
    padding: 0;
 }
 .box{
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    padding-top: 30px;
    box-sizing: border-box;
    .box1{
        width: 80%;
        height: 150px;
        margin: 0 auto;
        margin-bottom: 20px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 1px 1px 10px #ccc;
        
        .titel{
            width: 100%;
            height: 50px;
            line-height: 50px;
            margin-left:30px ;
             .titel1{
                font-size: 12px;
                color: #ccc;
                margin-left: 10px;
             }
        }
        .points{
            width: 100%;
            display: flex;
            .boxes{
                width: 80%;
               .boxes1{
                 width: 85%;
                 display: flex;
                 margin: 0 auto;
                 align-items: center;
                 font-size: 12px;
                 span{
                    margin-left: 12px;
                 }
                .el-progress{
                  width: 80%;
                  margin-top: 10px;
                  margin-left: 50px;
                 }
               }
               .boxes2{
                width: 85%;
                 display: flex;
                 margin: 0 auto;
                 align-items: center;
                 font-size: 12px;
                 span{
                    margin-left: 12px;
                 }
               }
            }
            .boxes1{
                width: 20%;
                button{
                    width: 50%;
                    height: 50px;
                   background-image: linear-gradient(to bottom, #5981e1, #55b1f0);
                   color: #fff;
                   border: none;
                   border-radius: 10px;
                }
            }
        }
       
    }
 }
 :deep(.el-slider ){
    width:80%;
    margin-left:20px;
 }
</style>